<template>
	<u-popup v-model="realShow" mode="center" border-radius="14" @close="close">
		<view class="dialog">
			<view class="title">
				<view class="exit"></view>
				<view class="text">WiFi列表</view>
				<view class="exit" @click="exit">
					<u-icon name="close" size="30"></u-icon>
				</view>
			</view>
			<scroll-view scroll-y class="list-scroll">
				<view class="list">
					<view class="list-item" v-for="(item,index) in data" :key="index" @click="selectWifi(index)">
						<!-- <view class="name">{{item.ssid.replace(/^"|"$/g, '')}}</view> -->
						<view class="name">{{item.SSID}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Array,
				default: () => {[]},
			}
		},
		data() {
			return {
				realShow: false,
			};
		},
		watch: {
			show: {
				handler(val) {
					this.realShow = val;
				},
				immediate: true,
				deep: true,
			}
		},
		methods: {
			close() {
				this.$emit("cancel");
			},
			exit() {
				this.$emit("cancel");
			},
			selectWifi(index) {
				this.$emit("change", this.data[index])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dialog {
		width: 617rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		overflow: hidden;

		.title {
			height: 105rpx;
			background-color: #FAFAFA;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.exit {
				width: 22rpx;
				height: 23rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 50rpx;
			}

			.text {
				font-size: 30rpx;
				color: #000000;
			}
		}
		
		.list-scroll {
			height: 400rpx;
			
			.list {
				padding: 0 30rpx;
			
				.list-item {
					height: 115rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx #D8D8D8 solid;
					
					.name {
						font-size: 30rpx;
						color: #010101;
						margin-left: 30rpx;
					}
				}
			
				.list-item:last-child {
					border-bottom-width: 0;
				}
			}
		}
	}
</style>